<template>
  <div class="page_user_mgr">
    <div style="font-size: 28px; text-align: center;  padding: 20px;">{{title}}</div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="8" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 140px;padding: 10px;margin-top: 15px;margin-bottom: 15px">
        <infor-card shadow :color="infor.color" :iconImg="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>

  </div>
</template>

<script>
import HomeApi from '@/api/homeApi'
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import img1 from '@/assets/images/home/1.png'
import img2 from '@/assets/images/home/2.png'
import img3 from '@/assets/images/home/3.png'
import img4 from '@/assets/images/home/4.png'
import img5 from '@/assets/images/home/5.png'
import img6 from '@/assets/images/home/6.png'

export default {
  name: 'mg-user-mgr',
  components: {
    InforCard,
    CountTo
  },
  data () {
    return {
      title: '',
      sta: {
        trainCenterCount: 0,
        coachCount: 0,
        trainerCount: 0,
        deviceCount: 0,
        planCount: 0,
        sportsRecordCount: 0
      },
      inforCardData: [
        { title: '加载中...', icon: img1, count: 0, color: '#2d8cf0' }
      ]
    }
  },
  methods: {
    queryStaData () {
      HomeApi.queryStaData().then(res => {
        this.sta = res.data.data.sta
        if (this.sta.roleId == 1) {
          this.title = this.$t('homeP.sysInfo')
          this.inforCardData = [
            { title: this.$t('homeP.trainCenter'), icon: img1, count: this.sta.trainCenterCount, color: '#2d8cf0' },
            { title: this.$t('homeP.coaches'), icon: img2, count: this.sta.coachCount, color: '#19be6b' },
            { title: this.$t('homeP.students'), icon: img3, count: this.sta.trainerCount, color: '#2d8cf0' },
            { title: this.$t('homeP.devices'),  icon: img4, count: this.sta.deviceCount, color: '#ff5500' },
            { title: this.$t('homeP.plans'), icon: img5, count: this.sta.planCount, color: '#ff9900' },
            { title: this.$t('homeP.sports'), icon: img6, count: this.sta.sportsRecordCount, color: '#ed3f14' }
          ]
        }
        // 教练，只看本人
        else if (this.sta.roleId == 4) {
          this.title = this.$t('homeP.perInfo') 
          this.inforCardData = [
            { title: this.$t('homeP.trainCenter'), icon: img1, count: this.sta.trainCenterCount, color: '#19be6b' },
            { title: this.$t('homeP.students'), icon: img3, count: this.sta.trainerCount, color: '#2d8cf0' }
          ]
        } else {
          this.title = this.$t('homeP.trainCenterInfo') 
          this.inforCardData = [
            { title: this.$t('homeP.coaches'), icon: img2, count: this.sta.coachCount, color: '#19be6b' },
            { title: this.$t('homeP.students'), icon: img3, count: this.sta.trainerCount, color: '#2d8cf0' },
            { title: this.$t('homeP.devices'),  icon: img4, count: this.sta.deviceCount, color: '#ff5500' },
            { title: this.$t('homeP.sports'), icon: img6, count: this.sta.sportsRecordCount, color: '#ed3f14' }
          ]
        }
      }, error => {
        this.$Message.error(error.response.data.msg)
      })
    }
  },
  mounted: function () {
    this.queryStaData()
  }

}
</script>
